﻿@{
    ViewBag.Title = "客户流量分析";
}

@section scripts
{
    <script src="@Url.Content("~/Scripts/shared/share.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/shared/shown.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/common/gridlayout.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/common/export.js")" type="text/javascript"></script>
}
<link href="~/Content/css/style.css?v=1.0.0" rel="stylesheet" />
<script src="~/Scripts/echarts3.min.js"></script>
<script src="~/Scripts/common.js"></script>
<style>
    #myChart {
        width: 100%;
        height: 90%;
    }
</style>
@Html.Partial("~/Views/Modular/ReportsToolbar.cshtml")
<div id="DivHeader">
    <table>
        <tr>
            <td width="70px" height="35px" align="right">门店名称：</td>
            <td width="195px" height="35px">
                @Html.Partial("~/Views/Modular/LookupStockInfo.cshtml")
            </td>
            <td width="70px" height="35px" align="right">统计日期：</td>
            <td width="160px" height="35px">
                <input class="mini-monthpicker" name="FDate" style="width: 107px;" value="" />
            </td>
        </tr>
    </table>
</div>
<div class="mini-splitter" vertical="true" style="width: 100%; height: 100%;">
    <div size="155" showcollapsebutton="true">
        <div class="mini-fit">
            <div id="datagrid1" class="mini-datagrid" style="width: 100%; height: 100%;" pagesize="15"
                borderstyle="border:0;" url="../Report/GetCustomerFlow"
                allowcellselect="true" allowcelledit="true" fitcolumns="false" onload ="SetChartData"
                showSummaryRow="false"showPager = "false" showPageSize="false" showPageIndex="false"
                frozenStartColumn="0" frozenEndColumn="0">
                <div property="columns">
                    <div field="FName" name="FName" width="90" headeralign="center" allowsort="true">2018.03</div>
                    <div field="F1" name="F1" width="60" headerAlign="center"align="right">1</div>
                    <div field="F2" name="F2" width="60" headerAlign="center"align="right">2</div>
                    <div field="F3" name="F3" width="60" headerAlign="center"align="right">3</div>
                    <div field="F4" name="F4" width="60" headerAlign="center"align="right">4</div>
                    <div field="F5" name="F5" width="60" headerAlign="center"align="right">5</div>
                    <div field="F6" name="F6" width="60" headerAlign="center"align="right">6</div>
                    <div field="F7" name="F7" width="60" headerAlign="center"align="right">7</div>
                    <div field="F8" name="F8" width="60" headerAlign="center"align="right">8</div> 
                    <div field="F9" name="F9" width="60" headerAlign="center"align="right">9</div>
                    <div field="F10" name="F10" width="60" headerAlign="center"align="right">10</div>
                    <div field="F11" name="F11" width="60" headerAlign="center"align="right">11</div>
                    <div field="F12" name="F12" width="60" headerAlign="center"align="right">12</div>
                    <div field="F13" name="F13" width="60" headerAlign="center"align="right">13</div>
                    <div field="F14" name="F14" width="60" headerAlign="center"align="right">14</div>
                    <div field="F15" name="F15" width="60" headerAlign="center"align="right">15</div>
                    <div field="F16" name="F16" width="60" headerAlign="center"align="right">16</div>
                    <div field="F17" name="F17" width="60" headerAlign="center"align="right">17</div>
                    <div field="F18" name="F18" width="60" headerAlign="center"align="right">18</div>
                    <div field="F19" name="F19" width="60" headerAlign="center"align="right">19</div>
                    <div field="F20" name="F20" width="60" headerAlign="center"align="right">20</div>            
                    <div field="F21" name="F21" width="60" headerAlign="center"align="right">21</div> 
                    <div field="F22" name="F22" width="60" headerAlign="center"align="right">22</div> 
                    <div field="F23" name="F23" width="60" headerAlign="center"align="right">23</div> 
                    <div field="F24" name="F24" width="60" headerAlign="center"align="right">24</div> 
                    <div field="F25" name="F25" width="60" headerAlign="center"align="right">25</div> 
                    <div field="F26" name="F26" width="60" headerAlign="center"align="right">26</div> 
                    <div field="F27" name="F27" width="60" headerAlign="center"align="right">27</div> 
                    <div field="F28" name="F28" width="60" headerAlign="center"align="right">28</div> 
                    <div field="F29" name="F29" width="60" headerAlign="center"align="right">29</div> 
                    <div field="F30" name="F30" width="60" headerAlign="center"align="right">30</div> 
                    <div field="F31" name="F31" width="60" headerAlign="center"align="right">31</div> 
                    <div field="FSum" name="FSum" width="80" headerAlign="center"align="right">月度总计</div> 
                    <div field="FAvg" name="FAvg" width="80" headerAlign="center"align="right">月度平均</div>
                    <div field="FRatioStr" name="FRatioStr" width="80" dataType ="string" headerAlign="center"align="right">同比增长%</div>
                </div>
            </div>
        </div>
    </div>

    <div showcollapsebutton="true">
        <div id="myChart"></div>
    </div>
</div>

<script>
    mini.parse();
    var dataResult;
    var grid = mini.get("datagrid1");
    var sumFields = "";

    var myChart = echarts.init(document.getElementById('myChart'));

    var labelOption = {
        normal: {
            show: true,
            position: 'insideBottom',
            distance: 15,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{c}',
            fontSize: 12,
            rich: {
                name: {
                    textBorderColor: '#fff'
                }
            }
        }
    };
    var option = {
        color: ['#DD7A59', '#2697EA', '#7CB0B6', '#2F4554'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['上月客流量', '本月客流量', '上月客单价', '本月客单价']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '客流量',
                axisLabel: {
                    formatter: '{value} 单'
                }
            },
            {
                type: 'value',
                name: '客单价',
                axisLabel: {
                    formatter: '{value} 元'
                }
            }
        ],
        series: [
            {
                name: '上月客流量',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                data: []
            },
            {
                name: '本月客流量',
                type: 'bar',
                label: labelOption,
                data: []
            },
            {
                name: '上月客单价',
                type: 'line',
                yAxisIndex: 1,
                label: labelOption,
                data: []
            },
            {
                name: '本月客单价',
                type: 'line',
                yAxisIndex: 1,
                label: labelOption,
                data: []
            }
        ]
    };
    myChart.setOption(option);

    function FormShown() {
        var nowDate = new Date();
        mini.getbyName("FDate").setValue(nowDate);
        LoadData();
    }

    function SetChartData() {
        var names = [];
        var lastAmount = [];
        var thisAmount = [];
        var lastPrice = [];
        var thisPrice = [];
        var title = '';
        var rCnt = grid.getData().length;
        if (rCnt > 3) {
            var row1 = grid.getRow(0);
            var row2 = grid.getRow(1);
            var row3 = grid.getRow(2);
            var row4 = grid.getRow(3);
            for (var i = 1; i < 32; i++) {
                var mjs = "names.push('" + i + "');lastAmount.push(row1.F" + i + ");thisAmount.push(row2.F" + i + ");lastPrice.push(row3.F"
                    + i + ");thisPrice.push(row4.F" + i + ");";
                eval(mjs);
            }
        }
        myChart.setOption({
            title: { text: title },
            xAxis: {
                data: names
            },
            series: [{
                data: lastAmount
            }, {
                data: thisAmount
            }, {
                data: lastPrice
            }, {
                data: thisPrice
            }]
        });
    }

    function LoadData() {
        var json = "[{";
        json = json + '"mSystemAppID":' + '"' + parent.window.getSystemAppID() + '",';
        json = json + '"mStockID":' + '"' + mini.getbyName("FStockID").getValue() + '",';
        json = json + '"mDateTime":' + '"' + mini.getbyName("FDate").getFormValue() + '-01"';
        json = json + "}]";

        grid.load({ mydata: json });

        var mTitle = mini.getbyName("FDate").getFormValue();
        grid.updateColumn("FName", { header: mTitle });

        mExportDataUrl = grid.url;
        mExportDataJson = json;
    }    

</script>
